@extends("admin.common.admin")

<title>添加预约 - 预约管理 - H-ui.admin v3.1</title>
@section("cnt")
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i>
        首页
        <span class="c-gray en">&gt;</span>
        添加预约
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
            <i class="Hui-iconfont">&#xe68f;</i>
        </a>
    </nav>


    <article class="page-container" id="app">
        <form class="form form-horizontal">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房东：</label>
                <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width:150px;">
                    <select class="select" v-model="formData.fangowner_id" name="fang_direction" size="1">
                        <template v-for="item in fData">
                            <option :value="item.id">@{{ item.name }}</option>
                        </template>
                    </select>
			    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租客：</label>
                <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width:150px;">
                    <select class="select" v-model="formData.renting_id" size="1">
                        <template v-for="item in rData">
                            <option :value="item.id">@{{ item.truename }}</option>
                        </template>
                    </select>
			    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>c预约时间：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" value="{{ $notice->dtime }}" autocomplete="off" @focus="choiceTime()" onclick="WdatePicker({ dateFmt:'yyyy-MM-dd HH:mm:ss' })" ref="wdate" id="datemin" class="input-text Wdate" style="width:200px;">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>预约内容：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea class="textarea" v-model="formData.cnt">{{ $notice->cnt }}</textarea>
                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary" type="button" @click="dopost()" value="添加预约">
                </div>
            </div>
        </form>
    </article>
@endsection
@section("js")
    <script src="/js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el:"#app",
            data:{
                fData: {!! $fData !!},
                rData: {!! $rData !!},
                formData:{
                    _token:"{{ csrf_token() }}",
                    fangowner_id:{{ $notice->fangowner_id }},
                    renting_id:{{ $notice->renting_id }},
                    dtime:"{{ $notice->dtime }}",
                    cnt:"{{ $notice->cnt }}",
                }
            },
            methods:{
                choiceTime(){
                    // 获取时间表单里面的数据
                    this.formData.dtime =this.$refs["wdate"].value;
                },

                dopost(){
                    $.ajax({
                        url:"{{ route('admin.notice.update',$notice) }}",
                        data:this.formData,
                        type:"PUT"
                    }).then(ret=>{
                        layer.msg(ret.msg, {time: 1500, icon: 1}, () => {
                           console.log(ret);
                            location.href = "{{ route('admin.notice.index') }}";
                        });
                    })
                }
            }
        });
    </script>
@endsection
